import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import css from './item.module.scss'
import { howLong, formatNumber } from '@/utils'
import Avatar from '@/components/Avatar'
export default class CommentItem extends PureComponent {
    static propTypes = {
        // 单条评论数据
        comment: PropTypes.object.isRequired,
        // 是否显示回复
        showReply: PropTypes.bool,
        onSelect: PropTypes.func        
    }

    static defaultProps = {
        showReply: true
    }

    // 格式化评论内容
    formatContent = (value) => {
        const { emote, message, members } = value
        let tempText = message
        if (emote) {
            for (const emoji of Object.values(emote)) {
                const { text, url } = emoji
                const formatText = text.replace('[', '\\[').replace(']', '\\]')
                const emoteReg = new RegExp(formatText, 'g')
                tempText = tempText.replace(emoteReg, `<img src="${url}" width="20" height="20" style="vertical-align: middle" />`)
            }
        }
        if (members) {
            for (const member of members) {
                const { uname, mid } = member
                const reg = new RegExp(`@${uname}`, 'g')
                tempText = tempText.replace(reg, `<span style="color:#409EFF" data-name="space" data-params="mid" data-value="${mid}">@${uname}</span>`)
            }
        }
        return tempText
    }

    // 跳转用户空间
    handleSpace = member => {
        // const { mid } = member
    }
    
    // 显示更多回复
    showMoreReply = () => {
        typeof this.props.onSelect === 'function' && this.props.onSelect(this.props.comment)
    }

    render() {
        const { comment: { member, ctime, like, content, replies, rcount }, showReply } = this.props
        const enableReply = replies !== null && replies.length > 0 && showReply
        return (
            <div className={css["comment-item"]}>
                <Avatar className={css["comment-avatar"]} src={member.avatar} />
                <div className={css["comment-content"]}>
                    <div className={css["comment-head"]}>
                        <div>
                            <span className={css["comment-name"]}  onClick={() => this.handleSpace(member)}>
                                <span className={member.vip.vipStatus > 0 ? 'vip' : ''}>{ member.uname }</span>
                                <span className={`level level${member.level_info.current_level}`}>
                                    <i className={`fa fa-level-${member.level_info.current_level}`}></i>
                                </span>
                            </span>
                            <span className={css["comment-time"]}>{ howLong(ctime) }</span>
                        </div>
                        <div>
                            <span className={css["comment-like"]}>
                                <i className="fa fa-nice"></i> { formatNumber(like) }
                            </span>
                        </div>
                    </div>
                    <div className={css["comment-body"]} dangerouslySetInnerHTML={{__html: this.formatContent(content)}}></div>                    
                    {
                        enableReply &&
                            <div className={css["comment-reply"]}>
                                {
                                    replies.map(item => {
                                        return (
                                            <p key={item.rpid}>
                                                <span className="link" onClick={this.handleSpace(item.member)}>{item.member.uname}：</span>
                                                <span className="content" dangerouslySetInnerHTML={{__html: this.formatContent(item.content)}}></span>
                                            </p>
                                        )
                                    })                                    
                                }                
                                { 
                                    rcount > 3 &&
                                        <p>
                                            <span className="link" onClick={this.showMoreReply}>
                                                共{rcount}条回复 
                                                <i className="fa fa-dropright"></i>
                                            </span>
                                        </p>
                                }
                            </div>                        
                    }                
                </div>
            </div>
        )
    }
}
